<template>
    <rx-layout>
        <template #middle>
            <rx-fit v-model="fitSearch"  class="task-fit">
                <template #search>
                    <rx-fit>
                        <template #middle>
                            <a-form :layout="colLayout" class="x-form-search">
                                <a-form-item :label="i18n('form.heading','事项标题')">
                                    <a-input :placeholder="i18n('form.heading','事项标题','input')"
                                             v-model:value="urlConfig.queryParam['Q_v.SUBJECT__S_LK']"/>
                                </a-form-item>
                                <a-form-item :label="i18n('form.numberOrder','单号')">
                                    <a-input :placeholder="i18n('form.numberOrder','单号','input')"
                                             v-model:value="urlConfig.queryParam['Q_v.BILL_NO__S_LK']"/>
                                </a-form-item>
                                <a-form-item :label="i18n('form.formData','表单数据')">
                                    <a-input :placeholder="i18n('form.formData','表单数据','input')"
                                             v-model:value="urlConfig.queryParam['Q_v.FIELD_JSON__S_LK']"/>
                                </a-form-item>
                                <a-form-item :label="i18n('form.process','审批环节')">
                                    <a-input :placeholder="i18n('form.process','审批环节','input')"
                                             v-model:value="urlConfig.queryParam['Q_v.NAME__S_LK']"/>
                                </a-form-item>
                                <a-form-item :label="i18n('form.timeFrom','创建时间 从')">
                                    <a-date-picker
                                        style="width: 100%"
                                        :placeholder="i18n('form.createTime','请输入任务创建时间')"
                                        v-model:value="urlConfig.queryParam['Q_v.CREATE_TIME__D_GE']"
                                        format="YYYY-MM-DD"
                                        value-format="YYYY-MM-DD"
                                    />
                                </a-form-item>
                                <a-form-item :label="i18n('form.to','至')">
                                    <a-date-picker
                                        style="width: 100%"
                                        :placeholder="i18n('form.createTime','请输入任务创建时间')"
                                        v-model:value="urlConfig.queryParam['Q_v.CREATE_TIME__D_LE']"
                                        format="YYYY-MM-DD"
                                        value-format="YYYY-MM-DD"
                                    />
                                </a-form-item>
                            </a-form>
                            <div class="list-search-toolbar">
                              <a-button type="primary" @click="search">
                                <SearchOutlined/>
                                {{ $ti18('rxList.searchBtn', '查询') }}
                              </a-button>
                              <a-button style="margin-left: 4px" @click="resetSearch">
                                {{ $ti18('rxList.resetBtn', '重置') }}
                              </a-button>
                            </div>
                        </template>
                    </rx-fit>
                </template>
                <template #head>
                    <div class="task-toolbar">
                        <div>
                            <a-button type="primary" @click="handBatApprove">
                                <CheckSquareOutlined />
                                {{ i18n('list.batchApply', '批量审批') }}
                            </a-button>
                        </div>
                        <span class="search-btn-box">
                      <span class="search-btn" @click.stop="searchshow" @mousedown.stop><SearchOutlined/>{{ $ti18('rxList.leachBtn', '过滤') }}</span>
                    </span>
                    </div>
                </template>
                <template #middle>
                    <rx-grid
                        ref="table"
                        :hasPage="true"
                        :urlConfig="urlConfig"
                        :selectConfig="selectConfig"
                        :pageConfig="pageConfig"
                        :url="url"
                        field="taskId"
                        :columns="columns"
                    >
                        <template #status="{row,rowIndex}">
                            <a-tag v-if="row.status == 'UNHANDLE'" color="red">
                                {{ i18n('form.toBeDone', '待办') }}
                            </a-tag>
                            <a-tag v-else-if="row.status == 'HANDLE'" color="green">
                                {{ i18n('form.processing', '处理中') }}
                            </a-tag>
                        </template>
                        <template #name="{row,rowIndex}">
                            {{ $i18(row.name, '审批环节') }}
                        </template>
                        <template #assignee="{row,rowIndex}">
                <span>
                  <a-tag v-for="taskExe in row.taskExecutors">
                    <GroupOutlined v-if="taskExe.type==='group'" />
                    <UserOutlined v-else-if="taskExe.type==='user'" />
                    &nbsp;{{ taskExe.name }}</a-tag>
                </span>
                        </template>
                        <template #action="{ row, rowIndex }">
                            <RxGridAction :size="2">
                                <div><a @click="handleTask(row)">{{ i18n('list.handle', '办理') }}</a></div>
                            </RxGridAction>
                        </template>
                        <template v-for="(field,index) in taskFields" #[field.value]="{row,rowIndex}">
                            <span>{{ getLabel(row, field) }}</span>
                        </template>
                    </rx-grid>
                </template>
            </rx-fit>
        </template>
    </rx-layout>
</template>


<script>
import {BaseList, RxLayout, RxFit, RxGrid, Util} from '@lowcode/jpaas-base-lib';
import {App} from '@lowcode/jpaas-share-component';
import TaskBatApprove from "./TaskBatApprove.vue";
import BpmDefApi from "@/common/api/bpm/bpmDef";
import FlowUtil from "../js/FlowUtil.js";

export default {
    name: 'BpmTaskList',
    mixins: [BaseList, FlowUtil, App],
    components: {
        RxLayout,
        RxFit,
        RxGrid,
        TaskBatApprove
    },
    data() {
        return {
            taskFields: [],
            //流程定义KEY
            defKey: "",
            url: "",
            urlConfig: {
                ajaxType: 'post',
                contentType: 'json',
                queryParam: {},
                dataField: 'result.data',
                totalField: 'result.totalCount'
            },
            selectConfig: {
                type: 'checkbox'
            },
            pageConfig: {
                pageSize: 10,
                pageSizes: [10, 30, 40]
            },
            //默认表头
            defColumns: [{
                title: this.i18n('form.itemTitle', '事项标题'),
                field: 'subject',
                minWidth: 180,
            }, {
                title: this.i18n('form.billNo', '单号'),
                field: 'billNo',
                minWidth: 100,
            }],
            // 表头
            columns: [],
            afterColumns: [{
                title: this.i18n('form.process', '审批环节'),
                field: 'name',
                minWidth: 100,
                slots: {default: 'name'}
            }, {
                title: this.i18n('form.time', '创建时间'),
                field: 'createTime',
                minWidth: 120,
            }, {
                title: this.$ti18('rxList.action', '操作'),
                field: 'action',
                minWidth: 100,
                slots: {default: 'action'},
            }],
        }
    },
    created() {
        this.initParams();
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "MyTaskByDefKey", key);
        },
        initParams() {
            var params = {};
            if (this.$route.meta.params) {
                params = JSON.parse(this.$route.meta.params);
            } else {
                params = this.$route.params;
            }
            this.defKey = params.defKey;
            if (params.defColumn != undefined && params.defColumn) {
                this.columns.push(...this.defColumns);
            }
            if (params.defKey) {
                this.getBpmDef(params.defKey);
            } else {
                this.columns.push(this.afterColumns);
            }
            this.url = "/api-bpm/bpm/core/bpmTask/myTasksByDefKey?defKey=" + this.defKey;
        },
        handleTask(record) {
            this.openInst(record.appId, record.instId, record.taskId);
        },
        resetSearch() {
            this.urlConfig.queryParam = {}
            this.$nextTick(() => {
                this.urlConfig.queryParam = {};
                let appId = this.curApp.appId;
                if (appId) {
                    this.urlConfig.queryParam.Q_APP_ID__S_EQ = appId;
                }
                this.$refs[this.table].loadData();
            })
        },
        search() {
            this.$refs.table.loadData()
        },
        cancel() {
            this.resetSearch()
        },
        getBpmDef(defKey) {
            BpmDefApi.getBydefKey(defKey).then(res => {
                var taskFields = JSON.parse(res.extConfs).Process.taskFields;
                if (!taskFields) {
                    this.columns.push(...this.afterColumns);
                    return;
                }
                for (let i = 0; i < taskFields.fields.length; i++) {
                    var field = taskFields.fields[i];
                    field.value += 'formJson';
                    this.taskFields.push(field);
                    this.columns.push({
                        title: field.label,
                        field: field.value,
                        width: 120,
                        slots: {default: field.value},
                    })
                }
                this.columns.push(...this.afterColumns);

            });
        },
        getLabel(record, field) {
            if (record.formJson) {
                var formJson = JSON.parse(record.formJson);
                for (let i = 0; i < formJson.length; i++) {
                    if (formJson[i].label == field.label) {
                        return formJson[i].val;
                    }
                }
            }
            return "";
        },
        handBatApprove() {
            var rows = this.$refs.table.getSelectedRows();
            if (!rows || rows.length == 0) {
                this.$notification.warning({
                    message: this.$ti18('rxMsa.tipsInfo', '提示信息'),
                    description:
                        this.i18n('list.batchSelectTips', '请选择需要审批的任务!'),
                });
                return;
            }
            var taskAry = rows.map(item => {
                return item.taskId;
            });
            let self_ = this;
            Util.open(
                {
                    component: TaskBatApprove,
                    curVm: this,
                    max: true,
                    title: this.i18n('list.pageTitle', '任务批量审批'),
                    data: {
                        taskIds: taskAry.join(",")
                    },
                    cancel: function () {
                        self_.refreshGrid();
                    }

                },
                function (action) {
                    self_.refreshGrid();
                }
            )
        },
    }
}
</script>
<style scoped>
.task-toolbar{
    display: flex;
    justify-content: space-between;
    padding: 4px 0 4px 10px;
    background-color: #fff;
}
.task-fit ::v-deep(.rx-fit-head){
    border:none;
}
</style>

